<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="__TMPL__/static/css/index.css">
		<link rel="stylesheet" href="__TMPL__/static/css/style.css">
		<link rel="stylesheet" type="text/css" href="__TMPL__/static/layui/css/layui.css"/>
		<link rel="stylesheet" href="__TMPL__/static/css/swiper-bundle.min.css">
		<script src="__TMPL__/static/layui/layui.js"></script>
		<script src="__TMPL__/static/js/jquery.min.js"></script>
		<script src="__TMPL__/static/js/swiper-bundle.min.js"></script>
		<style>
		.header{
			height: 100vh;
			min-height: 800px;
		}
		</style>
	</head>
	<body>
		{include file="header" /}
		<div class="container">
			<!-- 品牌介绍 -->
			<div class="brand">
				{hcTaglib:category id="7" item="brand" field="id,title,thumbnail,description"}
				<div class=" brand_center center_width">					
					 <div class="brand_center_left">
						<img src="{$brand['thumbnail']['url']}" alt="">
					 </div>			
					 <div class="brand_center_right">
						<div class="brand_info">
							<div class="brand_center_right_title">
									<h2>BRAND</h2>
									<h3>品牌介绍</h3>
							</div>
							<div class="brand_center_right_desc">
							 得事家电品牌正式进入中国，基于对中国市场的深刻洞察和准确定位，得事家电品牌在中国完成了全产业链布局，严格而先进的全球统一标准，贯穿了研发、采购、生产、销售直至售后服务全部家电产业生态系统的所有环节，为该品牌提供支持的投资公司、产品研发中心、原材料采购中心、销售公司、服务公司等机构遍布全国各地。
							</div>						
							<div class="brand_center_right_operation">
								<a href="" class="brand_center_right_button">
									<div class="brand_center_right_button_in">
										<span>了解更多</span>
										<img src="__TMPL__/static/img/arrow.png" alt="">
									</div>
								</a>
							</div>						 
						</div>
					 </div>	
					{/hcTaglib:category}					
				</div>
			</div>
			<div class="products center_width">
				<div class="products_center ">
					<div class="products_title">
						<h2>PRODUCTS</h2>
						<h3>产品展示</h3>
						<p>我们的产品遍布全国31个省、630多座城市</p>
					</div>
					<div class="swiper_product mySwiper">
					  <div class="swiper-wrapper">
						{hcTaglib:content cid="11" moduleId="3" mainField="id,title,thumbnail,description" limit="8" }
					    <div class="swiper-slide">
							<a href="{:hcUrl('detail/index',['cid'=>$vo['category_id'],'id'=>$vo['id']])}">
								<div class="product_img">
									<img src="{$vo['thumbnail']['url']}" >
								</div>
								<div class="swiper_product_text">
									<div>
										<h4>{$vo['title']}</h4>
										<p>{$vo['description']}</p>
									</div>
									<img src="__TMPL__/static/img/product_prev.png" id="product_prev">
								</div>
							</a>

						</div>
						{/hcTaglib:content}
					  </div>				  
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
					</div>
				</div>
			</div>
			
			<div class="news center_width">
				<div class="news_center">
					
					{hcTaglib:category id="5" item="new" field="id,title,thumbnail,description"}
					<div class="products_title news_title">
						<h2>NEWS</h2>
						<h3>{$new['title']}</h3>
						<p>{$new['description']}</p>
					</div>
					<div class="news_leftimg">
						<img src="{$new['thumbnail']['url']}" >
					</div>
					{/hcTaglib:category}
					{hcTaglib:content cid="9,10" moduleId="2" name="article" mainFeild="id,title,description,thumbnail" limit="3" onlyData="1"}
					<div class="news_right">
						{volist name="$article" id="vo" length="1"}
						<div class="first_item">
							<h5>{$vo['title']}</h5>
							<span>{$vo['publish_time']|date='Y-m-d'}</span>
							<p>
							{$vo.description|substr=0,150}
							</p>
							<button class="layui-btn newsmore">+</button>
						</div>
						{/volist}
						<ul class="news_list">
							{volist name="$article" id="vo" offset="1"}
								<li>
									<span class="date">{$vo['publish_time']|date='Y-m-d'}</span>
										<div class="news_list_title">
									<a href="{:hcUrl('detail/index',['id'=>$vo['id'],'cid'=>$vo['category_id']])}">

											<h5>{$vo['title']}</h5>
									</a>

											<p>生活小知识+</p>
										</div>
									<a href="{:hcUrl('detail/index',['id'=>$vo['id'],'cid'=>$vo['category_id']])}">
										<img src="__TMPL__/static/img/prev.png" class="prev" alt="">
									</a>
								</li>
							{/volist}

						</ul>
					</div>
					{/hcTaglib:content}

				</div>
			</div>
			<div class="imgbox">
				<div class="imgbox_center">
					<div class="swiper2 mySwiper2">
					  <div class="swiper-wrapper">
						  {hcTaglib:content cid="6" moduleId="2" mainField="id,thumbnail" limit="10"}
							<div class="swiper-slide">
							<img
								src="{$vo['thumbnail']['url']}"/>
							</div>
							{/hcTaglib:content}
					  </div>
					  <div class="swiper-button-next"></div>
					  <div class="swiper-button-prev"></div>					  					 
					</div>										
				</div>
			</div>
		</div>
		{include file="footer" /}
		<script>
		  var swiper = new Swiper(".mySwiper2", {
		    slidesPerView: 1,
		    centeredSlides: false,
		    slidesPerGroupSkip: 1,
		    grabCursor: true,
		    keyboard: {
		      enabled: true,
		    },
		    breakpoints: {
		      769: {
		        slidesPerView: 6,
		        slidesPerGroup: 2,
		      },
		    },
		    scrollbar: {
		      el: ".swiper-scrollbar",
		    },
		    navigation: {
		      nextEl: ".swiper-button-next",
		      prevEl: ".swiper-button-prev",
		    },
		    pagination: {
		      el: ".swiper-pagination",
		      clickable: true,
		    },
		  });
		</script>
		<script>	
		layui.use('carousel', function () {
				var carousel = layui.carousel
		//建造实例
		carousel.render({
						elem: '#test1'
						, width: '100%' //设置容器宽度
						, height: '100vh' //设置容器高度
						, full:'false' //是否全屏轮播,默认false
						, arrow: 'always' //始终显示箭头和点击按钮
						,anim: 'updown' //切换动画方式，可从各个方向滚动
						,autoplay:false
						
				})
    })	
		</script>
		<script>
		  var swiper = new Swiper(".mySwiper", {
		    slidesPerView: 4,
		    spaceBetween: 28,
		    pagination: {
		      el: ".swiper-pagination",
		      clickable: true,
		    },
			// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
		  });
		</script>

	</body>
</html>
